<template>
  <a-card :bordered="false">
    <!-- 抽屉 -->
    <a-drawer
      title="文章配置"
      :width="screenWidth"
      @close="onClose"
      :visible="visible"
    >
      <!-- 抽屉内容的border -->
      <div
        :style="{
          padding:'10px',
          border: '1px solid #e9e9e9',
          background: '#fff',
        }">

        <!-- 操作按钮区域 -->
        <div class="table-operator" style="margin: 5px 0 10px 2px">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon type="delete" @click="batchDel"/>
                删除
              </a-menu-item>
            </a-menu>
            <a-button style="margin-left: 8px">
              批量操作
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </div>

        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
          <i class="anticon anticon-info-circle ant-alert-icon">
          </i> 已选择 <a><b>{{ selectedRowKeys.length }}</b></a>项
          <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSources"
            :pagination="ipaginations"
            :loading="loading"
            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
            @change="handleTableChange2">


          <span slot="action" slot-scope="text, record">
             <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical"/>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete1(record.id)">
                    <a>删除</a>
                  </a-popconfirm>
        </span>
          </a-table>
        </div>
      </div>
    </a-drawer>
    <!-- 表单区域 -->
    <crawl-feature-doc-modal ref="modalForm" @ok="modalFormOk2"></crawl-feature-doc-modal>
  </a-card>


</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import moment from 'moment'
  import JInput from '@/components/jeecg/JInput'
  import CrawlFeatureDocModal from './modules/CrawlFeatureDocsModal'
  import {getAction, deleteAction} from '@/api/manage'

  export default {
    name: "CrawlFeatureDocLists",
    mixins: [JeecgListMixin],
    components: {
      JInput,
      moment,
      CrawlFeatureDocModal
    },
    data() {
      return {
        dataSources: [],
        visible: false,
        DocId: "",
        screenWidth: 900,
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
        ipaginations: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        columns:
          [
            {
              title: '文章名称',
              align: 'center',
              dataIndex: 'articleName'
            },
            {
              title: '变量名称',
              align: 'center',
              dataIndex: 'variableName'
            },
            {
              title: '参数值',
              align: 'center',
              dataIndex: 'componentValue',
            },
            {
              title: '参数位置',
              align: 'center',
              dataIndex: 'position',
            },
            {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              scopedSlots: {customRender: 'action'}
            }
          ],
        url: {
          list: "/sys/CrawlFeatureDoc/list",
          eleteBatch: "/sys/CrawlFeatureDoc/deleteBatch",
          delete: '/sys/CrawlFeatureDoc/delete',
          deleteBatch: "/sys/CrawlFeatureDoc/deleteBatch",
        },
      }
    },


    methods: {
      handleAdd() {
        this.$refs.modalForm.add(this.DocId);
      },

      handleTableChange2(pagination, filters, sorter) {
        console.log("========pagination========" + JSON.stringify(pagination))
        //分页、排序、筛选变化时触发
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter2.column = sorter.field
          this.isorter2.order = 'ascend' == sorter.order ? 'asc' : 'desc'
        }
        this.ipaginations = pagination
        this.loadData2()
      },

      modalFormOk2() {
        // 新增/修改 成功时，重载列表
        this.loadData2()
      },
      loadData2(record) {

        this.visible = true;
        let params = {}
        if (record != null) {
          this.dataSources = []
          this.DocId = record.id
          console.log("========record========" + JSON.stringify(record.id))
        }
        params.siteFeatureDocId = this.DocId
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            this.dataSources = res.result.records
            console.log("========dataSource========" + JSON.stringify(this.dataSources))
            this.ipaginations.total = res.result.total

          }
        })

      },

      handleEdit: function (record) {
        this.$refs.modalForm.edit(record)
        this.$refs.modalForm.title = '编辑'
      },

      handleDelete1: function (id) {
        this.handleDelete(id)
        this.loadData2()
      },

      batchDel: function () {
        if (this.selectedRowKeys.length <= 0) {
          this.$message.warning('请选择一条记录！');
          return;
        } else {
          var ids = "";
          for (var a = 0; a < this.selectedRowKeys.length; a++) {
            ids += this.selectedRowKeys[a] + ",";
          }
          var that = this;
          this.$confirm({
            title: "确认删除",
            content: "是否删除选中数据?",
            onOk: function () {
              deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
                if (res.success) {
                  that.$message.success(res.message);
                  that.loadData2();
                  that.onClearSelected();
                } else {
                  that.$message.warning(res.message);
                }
              });
            }
          });
        }
      },

      onClearSelected() {
        this.selectedRowKeys = [];
        this.selectionRows = [];
      },

      showDrawer() {
        this.visible = true
      },
      onClose() {
        this.visible = false
        this.dataSource = [];
      },
      // 抽屉的宽度随着屏幕大小来改变
      resetScreenSize() {
        let screenWidth = document.body.clientWidth;
        if (screenWidth < 600) {
          this.screenWidth = screenWidth;
        } else {
          this.screenWidth = 600;
        }
      },
      //update--begin--autor:wangshuai-----date:20191204------for：系统管理 数据字典禁用和正常区别开，添加背景颜色 teambition JT-22------
      //增加样式方法返回值
      getRowClassname(record) {
        if (record.status == 0) {
          return "data-rule-invalid"
        }
      },

      handleMenuClick(e) {
        if (e.key == 1) {
          this.batchDel()
        }
      },
    }
  }
</script>

<style scoped>
  /deep/ .ant-card-body {
    padding: 2px;
    zoom: 1;
  }

  /deep/ .data-rule-invalid {
    background: #f4f4f4;
    color: #bababa;
  }
</style>